@model dynamic

@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <title>User主页</title>
    <script src="/lib/jquery/dist/jquery.min.js"></script>
    <script src="/miniui/miniui.js"></script>
    <link  href="/miniui/themes/default/miniui.css"   rel="stylesheet"/>
    <link href="/miniui/themes/icons.css"  rel="stylesheet"/>
</head>
<body>
<div>
    @*搜索框*@
    <div style="padding-bottom:5px;">
        <span>用户名：</span><input type="text" id="userName"  />
        <span>邮箱</span><input type="text" id="userEmail" />
        <input type="button" value="搜索" onclick="search()"/>
    </div>
    @*操作列*@
    <mini-toolbar style="width:850px;border-bottom:0;padding:0;">
        <table style="width:100%;">
            <tr>
                <td style="width:100%;">
                    <a class="mini-button" iconCls="icon-add" onclick="addRow()" plain="true" tooltip="增加...">增加</a>
                    <a class="mini-button" iconCls="icon-remove" onclick="removeRow()" plain="true">删除</a>
                    <span class="separator"></span>
                </td>
            </tr>
        </table>
    </mini-toolbar>
    @*表单*@
    <div id="datagrid1" class="mini-datagrid" style="width:850px;height:350px;"
         url="/user/GetPagedUsers"
         idField="id" allowResize="true"
         sizeList="[2,5,10,15]" pageSize="2"
         showHeader="true" title="用户信息"
         ajaxType="get"
         multiSelect="true">
        <div property="columns">
            <column type="checkcolumn"></column>
            <div type="indexcolumn" ></div>
            <div field="id">用户编号</div>
            <div field="userName" width="120" headerAlign="center" >用户名</div>
            <div field="userEmail" width="120" headerAlign="center" >邮箱</div>
            <div field="gender" width="100" renderer="onGenderRenderer" align="center" headerAlign="center">性别</div>
            <div field="userPhone"  align="right" width="100" headerAlign="center">手机号码</div>
            <div field="photoUrl" width="100"   renderer="onPhotoRenderer">头像</div>
            <div name="action" width="120" headerAlign="center" align="center" renderer="onActionRenderer" cellStyle="padding:0;">操作</div>
        </div>
    </div>
</div>
<script>
    mini.parse();
    const grid = mini.get("datagrid1");
    grid.load();
    // 性别填充
    let Genders = [{ id: 0, text: '男' }, { id: 1, text: '女'}];
    function onGenderRenderer(e) {
        let i = 0, l = Genders.length;
        for (; i < l; i++) {
            let g = Genders[i];
            if (g.id === e.value) return g.text;
        }
        return "";
    }
    // 展示头像
    function onPhotoRenderer(e){
        return `<img src='/${e.value}' width='100px' height='100px' />`
    }
    // 搜索
    function search() {
        let userName = document.querySelector("#userName").value;
        let userEmail = document.querySelector("#userEmail").value;
        grid.load({ userName,userEmail});// {userName:userName,userEmail:userEmail}
    }
    // 操作列展示
    function onActionRenderer(e) {
        console.log("e==",e);
        let record = e.record;
        let uid = record.id;// 要删除或者编辑的用户的id值。
        return ' <a class="Edit_Button" href="javascript:editRow(\'' + uid + '\')" >编辑</a>'
            + '&nbsp;&nbsp; <a class="Delete_Button" href="javascript:delRow(\'' + uid + '\')">删除</a>';
    }
    // 删除操作
    function delRow(uid) {
        if (confirm("确定删除此记录？")) {
            grid.loading("删除中，请稍后......");
            $.ajax({
                url: "/user/DeleteUsers",
                method:"delete",
                data:{
                    userIds: [uid]
                },
                success: function (data) {
                    if(data.code===200){
                        grid.reload();
                        alert(data.msg);
                    }else{
                        alert(data.msg);
                    }
                },
                error: function () {
                }
            });
        }
    }
    // 批量删除
    function removeRow() {
        const rows = grid.getSelecteds();
        if(rows.length <=0){
            alert("请选择要删除的数据");
        }
        if(confirm("确定要删除选中的记录吗?")){
            //  console.log("rows==",rows);
            const userIds = rows.map(item=>item.id); // 存储的是要删除的记录的编号
            //console.log(userIds);
            $.ajax({
                method:"delete",
                url:"/user/DeleteUsers",
                data:{
                    userIds
                },// ids=1,2,3
                success:function(data){
                    if(data.code===200){
                        grid.reload();
                        alert(data.msg);
                    }else{
                        alert(data.msg);
                    }
                }
            })
        }
    }
    // 添加
    function addRow(){
        mini.open({
            targetWindow: window,
            url:"/user/AddPage",
            title: "新增用户", width: 800, height: 700,
            onload: function () {
                // var iframe = this.getIFrameEl();
                //var data = { action: "new" };
                //iframe.contentWindow.SetData(data);
            },
            ondestroy: function (action) {
                grid.reload();
            }
        });
    }
    // 编辑
    function editRow(userId){
        mini.open({
            targetWindow: window,
            url:"/user/editPage?userId="+userId,
            title: "编辑用户", width: 800, height: 700,
            onload: function () {
                // var iframe = this.getIFrameEl();
                //var data = { action: "new" };
                //iframe.contentWindow.SetData(data);
            },
            ondestroy: function (action) {
                grid.reload();
            }
        });
    }
</script>
</body>
</html>